<template>
  <div style="padding:15px" v-loading="pageLoading">
    <div class="text-wrap flex flex-center flex-col-between">
      <div class="desc-text text-primary">
        <i class="el-icon-s-grid" />
        <span class="text">人员出勤报表</span>
      </div>

      <div class="filter-container">
        <el-select class="filter-item" clearable style="width: 260px;margin-left: 5px" v-model="query.ScheduleVersionId"
          placeholder="排程版本">
          <el-option v-for="i in VersionList" :key="i.value" :label="i.label" :value="i.value"></el-option>
        </el-select>
        <el-date-picker v-model="query.times" value-format="YYYY-MM-DD" type="daterange" class="filter-item"
          style="width: 260px;margin-left: 5px" range-separator="To" start-placeholder="Start date"
          end-placeholder="End date" :size="size" />

        <el-input style="width: 260px;margin-left: 5px" class="filter-item" placeholder="人员信息模糊匹配"
          v-model="query.UserName" clearable> </el-input>
        <el-button class="filter-item" type="primary" @click="getList">查询</el-button>
      </div>

    </div>
    <n-config-provider :theme-overrides="themeOverrides">
      <n-data-table :virtual-scroll-x="true" :bordered="false" :single-line="false" ref="table"
        :checked-row-keys='selectRows' @update:checked-row-keys="handleCheck" :columns="columns" :data="data"
        :max-height="550" :scroll-x="1800" virtual-scroll />
      <!-- <button @click="getData">获取data</button> -->
    </n-config-provider>

    <el-dialog :title="`${curDate} 生产信息`" width="70%" v-model="dialogVisible">
      <z-Table :list="curMachineList" :tableProps="tableProps" :columns="columnsMachine">
        <template v-slot:content="{ row, key }">
          <span v-if="key == 'StartTime'" v-timeFormat="row[key]" format="HH:mm"></span>
          <span v-else-if="key == 'EndTime'" v-timeFormat="row[key]" format="HH:mm"></span>
          <span v-else> {{ row[key] }}</span>
        </template>

      </z-Table>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, h, getCurrentInstance } from "vue";
import { NButton, NTag, useMessage, NConfigProvider } from "naive-ui";
import dayjs from 'dayjs'
import _ from 'lodash'
import zTable from '../../_common/table.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  components: { zTable },
  data() {
    return {
      taskLoading: false,
      changeDeadLineValue: null,
      pageLoading:false,
      curDate: null,
      curMo: null,
      curMachineList: [],
      updateFlag:false,
      tableProps: {
        border: true,
        hideOperations: true,
      },
      CalculateTask:{},
      columnsMachine: [
        { title: '工单信息', key: 'MoCode' },
        { title: '设备信息', key: 'MachineCodeName' },
        { title: '开始时间', key: 'StartTime' },
        { title: '结束时间', key: 'EndTime' },
        { title: '产出数量', key: 'Qty' },

      ],
      dialogVisible: false,
      themeOverrides: {},
      query: {
        times:[]
      },
      VersionList: [],
      MachineList: [],
      selectRows: [],
      data: [

      ],

      BasColumns: [
    
        {
          title: "人员",
          key: "UserName",
          width: 120,
          fixed: "left"
        },
        {
          title: "岗位",
          key: "PostValue",
          width: 120,
          fixed: "left",
          render: null,
        },

      ],

      columns: [

      ],
    }


  },
  mounted() {
     this.initData()

    this.themeOverrides = {
      common: {
        primaryColor: '#7606E6'
      },
      Button: {
        textColor: '#7606E6'
      },
      Select: {
        peers: {
          InternalSelection: {
            textColor: '#7606E6'
          }
        }
      }
    }
  },

  methods: {
    getList(){
      if(!this.query.ScheduleVersionId) {
        return this.$message.error("排产版本不能为空")
      }
      if(!this.query.times.length) {
        return this.$message.error("日期范围不能为空")
      }

      let data = {
        ScheduleVersionId: this.query.ScheduleVersionId,
        UserName:this.query.UserName,
        StartTime:this.query.times[0],
        EndTime: dayjs(this.query.times[1]).subtract(-1, 'day').format('YYYY-MM-DD'),
      }
      this.http.post('/api/Aps_PostBindUser/GetPostUserWork', data)
      .then(r => {
        //this.data = r
        this.renderData(r)
      }).finally(i => {
        this.taskLoading = false
      })
    },


    titleRender(date, items) {
      return h("div", {
        style: 'color:orange',
        // onClick: (e) => this.handleTitleClick(date, items)
      }, date);
    },
    handleTitleClick(date, items) {
      this.curDate = date
      this.curMachineList = items.Childrens.filter(i => dayjs(i.WorkDate).format("MM-DD") == date )
      this.dialogVisible = true

    },
    renderData(r){
      let that =this
      this.columns = _.cloneDeep(this.BasColumns)
      let minDate = dayjs(this.query.times[0]) 
      let maxDate = dayjs(this.query.times[1]).subtract(-1, 'day')
      r.forEach((item,index) => {
        for (let i = minDate; i.isBefore(maxDate); i = i.add(1, 'day')) {
          let date = i.format('MM-DD')
          let curDate = item.Childrens.find(j => dayjs(j.WorkDate).format("MM-DD") == date )
          item[date] = curDate != undefined ? "出勤" : ""
         index ==0 && this.columns.push({
            title: date,
            key: date,
            width: 80,
            render(row) {
              return h("div", {
                style: 'color:green;cursor: pointer;font-weight:700',
                onClick: (e) => that.handleTitleClick(date, row)
              }, row[date]);
            },
          })
        }
      })
        this.data = r     
        console.log("🚀 ~ renderData ~ this.data:", this.data)
    },

    initData() {
      this.columns = _.cloneDeep(this.BasColumns)

      this.http.post('/api/Aps_ScheduleVersion/GetPageData', { sort: "CreateTime" }).then(r => {
        this.VersionList = r.rows.map(i => {
          return {
            value: i.ScheduleVersionId,
            label: i.Version
          }
        })
        this.query.ScheduleVersionId = this.VersionList[0]?.value

      })
    },
    handleCheck(items) {
      this.selectRows = items

    },
    ageRender(row, index) {
      return h("div", {
        style: 'color:red;cursor: pointer;',
        //onClick: (e) => this.handleAgeClick(row, index, e)
      }, dayjs(row.DeadLine).format('MM-DD'));
    },


    rowProps: (row, index, item) => {
      const { proxy } = getCurrentInstance();

      return {
        style: "cursor: pointer;",
        onClick: () => {
          console.log(row, index, item, 'proxy')
          proxy.$message.info(row)
        }
      };
    },
    getData() {
      console.log("🚀 ~ getData ~ this.data:", this.data)
    },
  },
}
</script>

<style lang="scss">
.text-wrap {
  height: 40px;
  position: relative;
  padding-bottom: 8px;
  display: flex;

  .desc-text {
    //  display: inline-block;
    margin-top: 7px;
    font-weight: bold;
    //margin-bottom: 3px;
    font-size: 14px;
    white-space: nowrap;
    border-bottom: 2px solid #7300e6;

    i {
      font-size: 16px;
      position: relative;
      top: 1px;
      margin-right: 2px;
    }
  }
}
</style>
